<script setup lang="ts">
// // pages/user/index.js
import { loginAPI, getMyDataAPI, getTopicListAPI, getVipAPI } from '@/services/my'
import { onLoad, onShow } from '@dcloudio/uni-app'
import type { mylogin } from '@/types/my'
import { defineProps, defineEmits, defineExpose, ref, onMounted } from 'vue'
import { myStore } from '@/stores'
import { useMemberStore, vip } from '@/stores'
import { openVIP, getVIP } from '@/services/my copy'
// 获取登录的数据
// mylogin[]是数据类型
const flag = ref<any>(true)
// 定义 emit 类型
const emit = defineEmits(['click', 'addNumb'])
const mylogin1 = myStore()
const member = useMemberStore()
const usrInfo1 = ref<any>()
const collectNum = ref<any>(0)
const vip1 = vip()
const vip11 = ref(0)

// 跳转登录页面
const handleGetuserinfo = () => {
  uni.navigateTo({
    url: '../login/login',
  })

  // const bannerList = ref<mylogin>()

  // let userInfo = {
  //   username: 'Joe',
  //   password: '123',
  //   gender: 1,
  //   language: '中文',
  //   city: '百京',
  //   picAddress: 'https://example.com/profile_pic.jpg',
  // }
  // console.log('啊啊啊')
  // const res = await loginAPI(userInfo)
  // bannerList.value = res.data
  // console.log(res)

  // // session 即可
  // // const token = bannerList.value.token
  // mylogin1.setuserinfo(bannerList.value)
  // // 存入token到userinfo 里 ，然后在http后面就可以取出来，因为存在持久化
  // // member.upProfile(token)
  usrInfo1.value = true
}
// 跳转注册页面
const handzhuce = () => {
  uni.navigateTo({
    url: '../zhuche/index',
  })
}
// 测试功能
const handleRefund = () => {
  uni.navigateTo({
    url: '../../pagesA/user-space/index?gerenail=' + JSON.stringify(item.value),
  })
}
// 点击退出登录
const outto = () => {
  uni.showModal({
    title: '提示',
    content: '确认退出登录吗？',
    success: function (res) {
      if (res.confirm) {
        // 执行确认后的操作
        // 输出本地缓存的数据
        mylogin1.clearuserinfo() // 去掉this
        member.clearProfile()
        member.cleartoken()
        usrInfo1.value = false // 去掉this
        guanzhu.value = 0
        fengsi.value = 0
        tiezi.value = 0
        // 清除缓存vip
        vip1.clearvip()
        vip11.value = vip1.vipid
        uni.showToast({
          title: '退出成功',
          //将值设置为 success 或者直接不用写icon这个参数
          icon: 'success',
          //显示持续时间为 2秒
          duration: 2000,
        })
      } else {
        // 执行取消后的操作
        uni.showToast({
          title: '取消成功',
          //将值设置为 success 或者直接不用写icon这个参数
          icon: 'success',
          //显示持续时间为 2秒
          duration: 2000,
        })
      }
    },
  })
}
// 关注和粉丝的数量
const guanzhu = ref(0)
const fengsi = ref(0)
const tiezi = ref(0)
const jdutiao = ref<any>(0)
// 定义生命周期钩子
const item = ref('')
// vip剩余天数
const vip111 = ref(0)
const viptime = ref('')
onShow(async () => {
  console.log('44444')
  if (member.profile.token) {
    console.log(1)

    usrInfo1.value = true
  } else {
    console.log(2)

    usrInfo1.value = false
  }
  let res: any = await getMyDataAPI({ user: mylogin1.userinfo })
  console.log(res, '获取到关注这些数据')
  guanzhu.value = res.guanzhu
  fengsi.value = res.fengsi
  tiezi.value = res.tiezi
  let res1 = await getTopicListAPI({ user: mylogin1.userinfo })
  console.log(res1, '帖子')
  item.value = res1.data[0]
  vip11.value = vip1.vipid

  let res2 = await getVipAPI({ user: mylogin1.userinfo })
  console.log(res2, '获取到VIP剩余天数数据')
  vip111.value = res2.data.shengyusjian
  viptime.value = res2.data.formattedDate
  // 计算出剩余时间VIP
  jdutiao.value = ((30 - vip111.value) / 30) * 270 + 'rpx'

  //获取vip 是不是是vip
  let res3: any = await getVIP({ user: mylogin1.userinfo.username,time:'1' })
  vip1.setvipid(res3.data[0].huiyuan)
  vip11.value = vip1.vipid
})

const dindan = () => {
  uni.navigateTo({
    url: '../../pagesA/dingdan/index',
  })
}
// 跳转到关注和粉丝页
const guanzhu1 = (biao) => {
  uni.navigateTo({
    url: '../../pagesA/socketliao/comp/search/index?data=' + biao,
    success: function (res) {
      // 打开新页面后，需要执行的代码写在这里
    },
  })
}
// 跳转编辑资料页面
const bianji = () => {
  uni.navigateTo({
    url: '../../pagesA/bianjiyem/index?gerenail=' + JSON.stringify(item.value),
  })
}
// 跳转到历史数据
const lishi = () => {
  uni.navigateTo({
    url: '../../pagesB/ks_lishi/index',
  })
}
// 开通VIP
const VIP = () => {
  uni.navigateTo({
    url: '../../pagesB/huiyuan_VIP/index',
  })
}
// 跳转错题本
const cuoti = ()=>{
  uni.navigateTo({
    url: '../../pagesB/ks_cuoti/index',
  })

}
// 跳转到消息
const xiaoxi = ()=>{
  uni.navigateTo({
    url: '../../pagesA/socketliao/index',
  })
}
</script>

<template>
  <view style="height: 100%">
    <!-- pages/user/index.wxml -->
    <!-- 个人中心页面 -->
    <!--     <view class="cart-bg" v-if="!userInfo"></view> -->

    <!-- 我都 -->
    <view class="flex-col page">
      <view class="flex-col flex-1 group_6">
        <view class="flex-row justify-between relative group_2" style="margin-top: 50rpx">
          <view class="flex-col justify-start items-center relative group_3">
            <view class="group_4"></view>
            <!-- 头像 -->
            <view class="flex-col justify-start items-center image-wrapper pos" v-if="usrInfo1">
              <image class="image_5" :src="mylogin1.userinfo.picAddress" mode="widthFix" />
              <view class="user-name">{{ mylogin1.userinfo.username }} </view>
            </view>
            <view class="flex-col justify-start items-center image-wrapper pos" v-else>
              <image
                class="image_5"
                src="../../static/assets/img/nothing.png"
                mode="widthFix"
              ></image>
              <view class="loginAndReg">
                <view class="button">
                  <!-- 这个按钮是微信小程序里的属性可以getUserInfo 是其中一种可能的取值，表示当用户点击该按钮时，小程序会自动触发获取用户信息的操作 -->
                  <button class="login" @tap="handleGetuserinfo">登录</button>
                  <button class="register" @tap="handzhuce">注册</button>
                </view>
              </view>
            </view>
            <!-- VIP -->
            <text
              class="iconfont order-icon icon-huiyuan"
              style="color: red; font-size: 40rpx; position: absolute; right: 10rpx; bottom: 108rpx"
              v-if="vip11 == 'true'"
            ></text>
          </view>
          <view class="flex-row items-center self-start group_5">
            <image
              class="image_7"
              src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=fe213854c26bfc9e48036e72aa749ea8.png"
            />
            <image
              class="ml-2 image_6"
              src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=a46268e9d1917436fd3ac6cb3a127b85.png"
            />
          </view>
        </view>
        <view class="flex-row waterfall">
          <view class="flex-col group_7">
            <view class="flex-col waterfall-item">
              <view class="flex-col group_11">
                <view class="flex-row justify-between items-center self-stretch" @tap="cuoti">
                  <text class="font_2 text_3">我的错题本</text>
                  <image
                    class="image_9"
                    src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=bf8d955a88983233def32f07c7b658a5.png"
                  />
                </view>
                <text class="self-start font_4 text_5 mt-13">错题复习</text>
              </view>
              <view class="flex-col justify-start relative mt-35">
                <view class="section_2"></view>
                <image
                  class="image_10 pos_2"
                  src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=903b967c26819aebd938714166d6edc3.png"
                />
              </view>
            </view>
            <view class="flex-col mt-29">
              <view class="flex-col waterfall-item_4" @tap="xiaoxi">
                <view class="flex-row justify-center items-center self-stretch">
                  <text class="font_2 text_8">我的消息</text>
                  <image
                    class="ml-22 image_11"
                    src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=07b08be2d68a3b1f54c3cb4c0d50e687.png"
                  />
                </view>
                <text class="self-start font_4 text_9">点击查看最近消息</text>
                <!-- <text class="self-start text_10">36</text> -->
              </view>
              <view class="flex-col waterfall-item_6 mt-29">
                <view class="flex-col items-start group_15" @tap="bianji()">
                  <text class="font text_14">资料编辑</text>
                  <text class="mt-20 font_3 text_16">完善信息</text>
                  <text class="mt-20 font_3 text_18">学习模式设置</text>
                </view>
                <view class="flex-col items-center group_19" @tap="outto()">
                  <text class="text_20">退出登录</text>
                  <image
                    class="image_15 mt-13"
                    src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=ac9486297777e78f308ac1f0ec4611f9.png"
                  />
                </view>
              </view>
            </view>
          </view>
          <view class="flex-col group_8 ml-13">
            <view class="flex-col waterfall-item_2 group_9">
              <view class="flex-row justify-between items-center self-stretch group_10">
                <text class="font text_2">联系客服</text>
                <image
                  class="image_8"
                  src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=ed45c61c5325fc63d1cd1f1a0697116a.png"
                />
              </view>
              <text class="mt-6 self-start font_3 text_4"
                >有问题，找客服，人工智能客服全天在线</text
              >
            </view>
            <view class="flex-col group_12">
              <view class="flex-col waterfall-item_3 section_3" @tap="lishi">
                <view class="flex-col self-start group_13">
                  <text class="self-start font_2 text_6">观看历史</text>
                  <text class="self-stretch font_4 text_7 mt-15">观看练习成绩和温习</text>
                </view>
                <view class="flex-col justify-start items-start self-stretch image-wrapper_2">
                  <image
                    class="image_12"
                    src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=601af687e5ae13d1943eb772595597bf.png"
                  />
                </view>
              </view>
              <view class="mt-28 flex-col waterfall-item_5 section_4">
                <view class="flex-col">
                  <view class="self-start group_14">
                    <text class="font text_11">VIP</text>
                    <text class="font_2 text_12">服务</text>
                  </view>
                  <!-- <text class="self-start font_5 text_13">点击查看vip服务</text> -->
                  <view class="flex-col self-stretch group_16">
                    <text class="self-start font_5 text_15" style="margin-bottom: 30rpx"
                      >vip有效期:{{ viptime }}</text
                    >
                    <view class="mt-2 flex-col justify-start items-start self-stretch section_5">
                      <view class="section_6"></view>
                    </view>
                  </view>
                </view>
                <!-- <view class="flex-col group_17">
                  <text class="self-start text_17">好友学习进度榜</text>
                  <view class="flex-row items-center self-stretch mt-3">
                    <view class="flex-col justify-start items-start relative group_18">
                      <image
                        class="image_13"
                        src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=37010df9a2ce4b1f749d91e0469373f3.png"
                      />
                      <image
                        class="image_13 pos_3"
                        src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=3872f324f8967ef5286c594d32abd9bd.png"
                      />
                      <image
                        class="image_14 pos_4"
                        src="https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=c4d57f2682420fdb4a08a1b726472774.png"
                      />
                    </view>
                    <text class="text_19 ml-7">...</text>
                  </view>
                </view> -->
                <view class="flex-col justify-start items-center text-wrapper" @tap="VIP()"
                  ><text class="font">点击进入</text></view
                >
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
//
/* pages/user/index.wxss */
page {
  background-image: url('https://img.tukuppt.com/ad_preview/00/79/64/60c303da02149.jpg!/fw/980');
  // background: linear-gradient(to right, rgb(175, 221, 227), rgb(243, 234, 236));
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.cart-bg {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 240rpx;
  // background-image: url('https://img.tukuppt.com/ad_preview/00/79/64/60c303da02149.jpg!/fw/980');
  color: #0f7cdb;
  z-index: -1;
}
.noUser {
  margin-top: 30rpx;
  margin-left: 30rpx;
  display: flex;
  align-items: center;
}
.noUser .avatar {
  width: 150rpx;
  height: 150rpx;
  border-radius: 50%;
}
.loginAndReg {
  position: relative;
  top: -100rpx;
  margin-left: 500rpx;
}
.loginAndReg .info {
  font-size: 28rpx;
  color: #ffffff;
}
.loginAndReg .button {
  display: flex;
  margin-top: 10rpx;
}
.loginAndReg .button .login,
.loginAndReg .button .register {
  margin: 0;
  padding: 0;
  width: 160rpx;
  background: linear-gradient(to right, rgb(0, 225, 255), pink);
  color: #ffffff;
  font-size: 26rpx;
  padding: 10rpx 30rpx;
  border-radius: 30rpx;
  font-weight: 400;
  opacity: 1;
}
.noUser .loginAndReg .button .login {
  margin-right: 10rpx;
}
.user-info-wrap {
  height: 360rpx;
}
.user-info-wrap .user-img-wrap {
  position: relative;
}

.user-info-wrap .user-img-wrap .user-bg {
  height: 340rpx;
  width: 100vw;
  background-color: #eae4e4;
}
.user-info-wrap .user-img-wrap .user-info {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 10%;
  text-align: center;
}
.user-info-wrap .user-img-wrap .user-info .outto {
  width: 150rpx;
  height: 50rpx;
  font-size: 10px;
  border-radius: 50%;
  color: rgb(19, 138, 198);
}
.user-info-wrap .user-img-wrap .user-info .outto1 {
  display: none;
}
.user-info-wrap .user-img-wrap .user-info .user-icon {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}
.user-name {
  font-family: '微软雅黑'; /*设置字体*/
  position: relative;
  top: -80rpx;
  margin-left: 400rpx;
  width: 150rpx;
  font-size: 35rpx;
  background: -webkit-linear-gradient(top, #1a1c1a, #4a4347); /*设置线性渐变*/
  /*为了支持更多的浏览器*/
  -webkit-background-clip: text; /*背景被裁剪到文字*/
  -webkit-text-fill-color: transparent; /*设置文字的填充颜色*/
  text-shadow: 0 8px 10px #362e34; /*设置文字阴影*/
  text-align: center;

  animation: flicker 2s infinite; /*设置动画*/
}
@keyframes flicker {
  /*创建动画*/
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.use-content {
  width: 100%;
  height: 500rpx;
}
.use-content .use-main {
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 400rpx;

  width: 100%;
  height: 70%;
  // 圆润左上和右上

  border-radius: 30rpx 30rpx 0rpx 0rpx;
}
.use-content .use-main .history-wrap {
  width: 100%;

  background: linear-gradient(to right, rgb(0, 225, 255), rgb(244, 220, 224));
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-radius: 10rpx;
  opacity: 0.8;
  color: #050c0dee;
  border-radius: 30rpx;
}
.history-name {
  flex: 1;
  // 字体变好看
  font-size: 30rpx;
  text-align: center;
  color: #050c0dee;
  font-weight: 600;
  font-family: 'Microsoft YaHei';
  font-style: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  // 字体阴影
  text-shadow: 0 0 100rpx #0000001a;
}
.use-content .use-main .history-wrap navigator {
  text-align: center;
  padding: 20px 20px;
}
.use-content .use-main .history-wrap .history-num {
  color: rgb(26, 167, 232);
  font-size: 30px;
  text-align: center;
}
.use-content .use-main .history-wrap navigator .history-num {
  color: rgb(26, 167, 232);
  text-align: center;

  font-size: 30px;
}
.use-content .use-main .order {
  margin-top: 20px;
  background: linear-gradient(to right, rgb(0, 225, 255), rgb(244, 220, 224));
  border-radius: 10px;
  opacity: 0.8;
}
.use-content .use-main .order .order-top {
  padding: 20rpx 20rpx 12rpx 6rpx;
  font-size: 32rpx;
  color: #050c0dee;
}
.use-content .use-main .order .order-top::before {
  content: '@';
  display: inline-block;
  width: 20px;
  height: 30px;
  background: linear-gradient(to right, rgb(0, 225, 255), #03a2ec);
  position: relative;
}
.use-content .use-main .order .order-content {
  display: flex;
  justify-content: space-between;
  text-align: center;
}
.use-content .use-main .order .order-content navigator,
.use-content .use-main .order .order-content view {
  text-align: center;
  padding: 10rpx 20rpx;
  margin: 0; /* 设置 margin 为零 */
}

.use-content .use-main .order .order-content .content-item .order-icon {
  color: #eb2b2be0;
  font-size: 40rpx;
}

.use-content .use-main .order .order-content .content-item .allOrder {
  margin-top: 6rpx;
  color: #050c0dee;
}
.use-content .use-main .other {
  margin-top: 20rpx;
  border-radius: 10rpx;
  background: linear-gradient(to right, rgb(0, 225, 255), rgb(244, 220, 224));
  opacity: 0.8;
}
.use-content .use-main .other .other-item {
  display: flex;
  padding: 20rpx;
  align-items: center;
  justify-content: space-between;
  font-size: 32rpx;
}
.use-content .use-main .other .other-item .iconAndTitle {
  display: flex;
}
.use-content .use-main .other .other-item .iconAndTitle button {
  background-color: #03a2ec00;
  height: 55rpx;
}
.use-content .use-main .other .other-item .iconAndTitle .info {
  flex: 1;
  color: #050c0dee;
  margin-left: 10rpx;
  font-size: 30rpx;
  margin: 0;
  padding: 0;
  border-radius: 0;
  font-weight: 400;
  width: auto;
}
.use-content .use-main .other .other-item .iconAndTitle .info .icon {
  color: #eb2b2be0;
  font-size: 34rpx;
}
.use-content .use-main .other .other-item:nth-last-child(1) {
  border: none;
}
.mohu {
  // 模糊效果更大

  -webkit-filter: blur(5px);
  filter: blur(2px);
}
// 新的样式
.mt-35 {
  margin-top: 63.41rpx;
}
.mt-29 {
  margin-top: 52.54rpx;
}
.mt-13 {
  margin-top: 23.55rpx;
}
.ml-13 {
  margin-left: 23.55rpx;
}
.mt-15 {
  margin-top: 27.17rpx;
}
.mt-3 {
  margin-top: 5.43rpx;
}
.ml-7 {
  margin-left: 12.68rpx;
}
.page {
  background-color: #ffffff;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.group_6 {
  overflow-y: auto;
}
.group_2 {
  margin-top: -61.59rpx;
  padding-left: 72.46rpx;
  padding-right: 28.99rpx;
}
.group_3 {
  padding-bottom: 10.87rpx;
  width: 141.3rpx;
}
.group_4 {
  border-radius: 50%;
  padding-top: 125rpx;
  width: 121.38rpx;
  height: 111.99rpx;
  border-left: solid 5.43rpx #f4f4f4;
  border-right: solid 5.43rpx #f4f4f4;
  border-top: solid 5.43rpx #f4f4f4;
  border-bottom: solid 5.43rpx #f4f4f4;
}
.image-wrapper {
  padding-top: 17.74rpx;
  border-radius: 0 0 50%rpx 50%rpx;
  background-size: 141.3rpx 141.3rpx;
  background-repeat: no-repeat;
  background-image: url('https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=3c8d261a8c9ba510c89c67777b9007bc.png');
  background-position: 0rpx -4.09rpx;
  width: 141.3rpx;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.image_5 {
  border-radius: 50%;

  width: 105.45rpx;
  height: 105.45rpx;
}
.group_5 {
  margin-top: 18.12rpx;
}
.image_7 {
  width: 43.48rpx;
  height: 43.48rpx;
}
.image_6 {
  width: 70.65rpx;
  height: 63.41rpx;
}
.waterfall {
  margin: 39.86rpx 28.99rpx 0;
}
.group_7 {
  flex: 1 1 333.33rpx;
}
.waterfall-item {
  padding: 50.72rpx 21.74rpx 50.72rpx 36.23rpx;
  overflow: hidden;
  border-radius: 45.29rpx;
  background-color: #3e3c91;
}
.group_11 {
  padding: 0 10.87rpx;
}
.font_2 {
  font-size: 36.23rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 32.36rpx;
  color: #ffffff;
}
.text_3 {
  line-height: 33.33rpx;
}
.image_9 {
  width: 54.35rpx;
  height: 52.54rpx;
}
.font_4 {
  font-size: 21.74rpx;
  font-family: AlimamaShuHeiTi;
  color: #ffffff;
}
.text_5 {
  font-size: 23.55rpx;
  line-height: 21.96rpx;
}
.section_2 {
  margin-left: 10.87rpx;
  background-color: #2c8bc7;
  height: 18.12rpx;
}
.image_10 {
  width: 230.07rpx;
  height: 19.93rpx;
}
.pos_2 {
  position: absolute;
  left: 0;
  bottom: 0;
}
.waterfall-item_4 {
  padding: 57.97rpx 39.86rpx 57.97rpx 47.1rpx;
  background-color: #52b9fb;
  border-radius: 45.29rpx;
}
.text_8 {
  line-height: 33.7rpx;
}
.image_11 {
  width: 56.16rpx;
  height: 52.54rpx;
}
.text_9 {
  margin-left: 7.25rpx;
  margin-top: 14.49rpx;
  line-height: 20.11rpx;
}
.text_10 {
  margin-top: 25.36rpx;
  color: #ffffff;
  font-size: 61.59rpx;
  font-family: KingsoftCloud;
  line-height: 53.77rpx;
}
.waterfall-item_6 {
  padding: 0 36.23rpx;
  background-color: #f4f4f4;
  border-radius: 45.29rpx;
}
.group_15 {
  padding: 50.72rpx 0 47.1rpx;
  border-bottom: solid 1.81rpx #e1e1e1;
}
.font {
  font-size: 36.23rpx;
  font-family: KingsoftCloud;
  line-height: 32.36rpx;
  color: #ffffff;
}
.text_14 {
  color: #2f2d51;
}
.font_3 {
  font-size: 21.74rpx;
  font-family: HuXiaoBoNanShen;
  line-height: 25.36rpx;
  color: #2f2d51;
}
.text_16 {
  margin-left: 7.25rpx;
}
.text_18 {
  margin-left: 7.25rpx;
}
.group_19 {
  padding: 50.72rpx 0 67.03rpx;
}
.text_20 {
  color: #2f2d51;
  font-size: 32.61rpx;
  font-family: KingsoftCloud;
  line-height: 29.15rpx;
}
.image_15 {
  border-radius: 28.99rpx;
  width: 112.32rpx;
  height: 57.97rpx;
}
.group_8 {
  flex: 1 1 333.33rpx;
}
.waterfall-item_2 {
  margin-right: 7.25rpx;
}
.group_9 {
  padding: 25.36rpx 21.74rpx 61.59rpx 32.61rpx;
  border-radius: 45.29rpx;
  border-left: solid 1.81rpx #d8dff6;
  border-right: solid 1.81rpx #d8dff6;
  border-top: solid 1.81rpx #d8dff6;
  border-bottom: solid 1.81rpx #d8dff6;
}
.group_10 {
  padding: 0 3.62rpx;
}
.text_2 {
  color: #444262;
}
.image_8 {
  width: 59.44rpx;
  height: 54.35rpx;
}
.text_4 {
  color: #afb9d7;
  width: 221.01rpx;
}
.group_12 {
  padding-left: 3.62rpx;
  padding-top: 36.23rpx;
}
.waterfall-item_3 {
  margin-right: 5.43rpx;
}
.section_3 {
  padding: 0 21.74rpx 50.72rpx;
  background-color: #5e62ac;
  border-radius: 45.29rpx;
}
.group_13 {
  margin-left: 10.87rpx;
  padding: 57.97rpx 0 43.48rpx;
  width: 215.58rpx;
}
.text_6 {
  line-height: 33.7rpx;
}
.text_7 {
  line-height: 25.36rpx;
}
.image-wrapper_2 {
  background-image: url('https://ide.code.fun/api/image?token=65eebd3deb5b5500113404a7&name=574d613982caa781720c40109620ccf4.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.image_12 {
  width: 222.83rpx;
  height: 19.93rpx;
}
.waterfall-item_5 {
  margin-left: 5.43rpx;
}
.section_4 {
  padding: 54.35rpx 21.74rpx 68.84rpx 32.61rpx;
  background-color: #2f2d51;
  border-radius: 45.29rpx;
  height: 500rpx;
}
.group_14 {
  line-height: 32.54rpx;
}
.text_11 {
  line-height: 31.63rpx;
}
.text_12 {
  line-height: 32.54rpx;
}
.font_5 {
  font-size: 21.74rpx;
  font-family: HuXiaoBoNanShen;
  line-height: 21.96rpx;
  color: #ffffff;
}
.text_13 {
  margin-left: 7.25rpx;
  margin-top: 10.87rpx;
  line-height: 23.24rpx;
}
.group_16 {
  margin-top: 32.61rpx;
}
.text_15 {
  line-height: 23.3rpx;
}
.section_5 {
  margin-left: 9.06rpx;
  background-color: #3e3c6d;
}
.section_6 {
  background-color: #52b9fb;
  width: v-bind('jdutiao');
  // 270rpx是全部
  height: 18.12rpx;
  max-width: 270rpx;
}
.group_17 {
  margin-top: 47.1rpx;
  padding-bottom: 39.86rpx;
  border-bottom: solid 1.81rpx #3e3c6d;
}
.text_17 {
  margin-left: 3.62rpx;
  color: #ffffff;
  font-size: 25.36rpx;
  font-family: KingsoftCloud;
  line-height: 22.64rpx;
}
.group_18 {
  width: 125.91rpx;
}
.image_13 {
  border-radius: 50%;
  width: 52.54rpx;
  height: 52.54rpx;
}
.pos_3 {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.image_14 {
  backdrop-filter: blur(18.12rpx);
  border-radius: 50%;
  width: 54.35rpx;
  height: 54.35rpx;
}
.pos_4 {
  position: absolute;
  right: 0;
  bottom: 0;
}
.text_19 {
  color: #ffffff;
  font-size: 18.12rpx;
  font-family: HuXiaoBoNanShen;
  line-height: 2.21rpx;
}
.text-wrapper {
  margin: 54.35rpx 14.49rpx 0;
  padding: 28.99rpx 0 21.74rpx;
  background-color: #ec5d50;
  border-radius: 27.17rpx;
}
.section_7 {
  margin-top: 48.91rpx;
  padding: 12.68rpx 65.22rpx 41.67rpx;
  background-color: #ffffff;
}
.text_21 {
  margin-top: 25.36rpx;
  color: #2f2d51;
  font-size: 25.36rpx;
  font-family: AlimamaShuHeiTi;
  line-height: 30.8rpx;
  word-break: break-all;
  opacity: 0.5;
  width: 45.29rpx;
}
.image_19 {
  margin-top: 18.12rpx;
  opacity: 0.5;
  width: 36.23rpx;
  height: 36.23rpx;
}
.image_17 {
  margin-top: 12.68rpx;
}
.group_20 {
  margin-right: 7.25rpx;
}
.image_18 {
  margin-top: 12.68rpx;
  opacity: 0.5;
  width: 43.48rpx;
  height: 43.48rpx;
}
.image_16 {
  border-radius: 36.23rpx;
  width: 72.46rpx;
  height: 103.26rpx;
}
//
/************************************************************
** 请将全局样式拷贝到项目的全局 CSS 文件或者当前页面的顶部 **
** 否则页面将无法正常显示                                  **
************************************************************/

page {
  width: 100vw;
  height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
}

view,
image,
text {
  box-sizing: border-box;
  flex-shrink: 0;
}

.flex-row {
  display: flex;
  flex-direction: row;
}

.flex-col {
  display: flex;
  flex-direction: column;
}

.justify-start {
  justify-content: flex-start;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.justify-around {
  justify-content: space-around;
}

.justify-evenly {
  justify-content: space-evenly;
}

.items-start {
  align-items: flex-start;
}

.items-end {
  align-items: flex-end;
}

.items-center {
  align-items: center;
}

.items-baseline {
  align-items: baseline;
}

.items-stretch {
  align-items: stretch;
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.self-baseline {
  align-self: baseline;
}

.self-stretch {
  align-self: stretch;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-auto {
  flex: 1 1 auto;
}

.grow {
  flex-grow: 1;
}

.grow-0 {
  flex-grow: 0;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.ml-2 {
  margin-left: 3.62rpx;
}

.mt-2 {
  margin-top: 3.62rpx;
}

.ml-4 {
  margin-left: 7.25rpx;
}

.mt-4 {
  margin-top: 7.25rpx;
}

.ml-6 {
  margin-left: 10.87rpx;
}

.mt-6 {
  margin-top: 10.87rpx;
}

.ml-8 {
  margin-left: 14.49rpx;
}

.mt-8 {
  margin-top: 14.49rpx;
}

.ml-10 {
  margin-left: 18.12rpx;
}

.mt-10 {
  margin-top: 18.12rpx;
}

.ml-12 {
  margin-left: 21.74rpx;
}

.mt-12 {
  margin-top: 21.74rpx;
}

.ml-14 {
  margin-left: 25.36rpx;
}

.mt-14 {
  margin-top: 25.36rpx;
}

.ml-16 {
  margin-left: 28.99rpx;
}

.mt-16 {
  margin-top: 28.99rpx;
}

.ml-18 {
  margin-left: 32.61rpx;
}

.mt-18 {
  margin-top: 32.61rpx;
}

.ml-20 {
  margin-left: 36.23rpx;
}

.mt-20 {
  margin-top: 36.23rpx;
}

.ml-22 {
  margin-left: 39.86rpx;
}

.mt-22 {
  margin-top: 39.86rpx;
}

.ml-24 {
  margin-left: 43.48rpx;
}

.mt-24 {
  margin-top: 43.48rpx;
}

.ml-26 {
  margin-left: 47.1rpx;
}

.mt-26 {
  margin-top: 47.1rpx;
}

.ml-28 {
  margin-left: 50.72rpx;
}

.mt-28 {
  margin-top: 50.72rpx;
}

.ml-30 {
  margin-left: 54.35rpx;
}

.mt-30 {
  margin-top: 54.35rpx;
}

.ml-32 {
  margin-left: 57.97rpx;
}

.mt-32 {
  margin-top: 57.97rpx;
}

.ml-34 {
  margin-left: 61.59rpx;
}

.mt-34 {
  margin-top: 61.59rpx;
}

.ml-36 {
  margin-left: 65.22rpx;
}

.mt-36 {
  margin-top: 65.22rpx;
}

.ml-38 {
  margin-left: 68.84rpx;
}

.mt-38 {
  margin-top: 68.84rpx;
}

.ml-40 {
  margin-left: 72.46rpx;
}

.mt-40 {
  margin-top: 72.46rpx;
}

.ml-42 {
  margin-left: 76.09rpx;
}

.mt-42 {
  margin-top: 76.09rpx;
}

.ml-44 {
  margin-left: 79.71rpx;
}

.mt-44 {
  margin-top: 79.71rpx;
}

.ml-46 {
  margin-left: 83.33rpx;
}

.mt-46 {
  margin-top: 83.33rpx;
}

.ml-48 {
  margin-left: 86.96rpx;
}

.mt-48 {
  margin-top: 86.96rpx;
}

.ml-50 {
  margin-left: 90.58rpx;
}

.mt-50 {
  margin-top: 90.58rpx;
}

.ml-52 {
  margin-left: 94.2rpx;
}

.mt-52 {
  margin-top: 94.2rpx;
}

.ml-54 {
  margin-left: 97.83rpx;
}

.mt-54 {
  margin-top: 97.83rpx;
}

.ml-56 {
  margin-left: 101.45rpx;
}

.mt-56 {
  margin-top: 101.45rpx;
}

.ml-58 {
  margin-left: 105.07rpx;
}

.mt-58 {
  margin-top: 105.07rpx;
}

.ml-60 {
  margin-left: 108.7rpx;
}

.mt-60 {
  margin-top: 108.7rpx;
}

.ml-62 {
  margin-left: 112.32rpx;
}

.mt-62 {
  margin-top: 112.32rpx;
}

.ml-64 {
  margin-left: 115.94rpx;
}

.mt-64 {
  margin-top: 115.94rpx;
}

.ml-66 {
  margin-left: 119.57rpx;
}

.mt-66 {
  margin-top: 119.57rpx;
}

.ml-68 {
  margin-left: 123.19rpx;
}

.mt-68 {
  margin-top: 123.19rpx;
}

.ml-70 {
  margin-left: 126.81rpx;
}

.mt-70 {
  margin-top: 126.81rpx;
}

.ml-72 {
  margin-left: 130.43rpx;
}

.mt-72 {
  margin-top: 130.43rpx;
}

.ml-74 {
  margin-left: 134.06rpx;
}

.mt-74 {
  margin-top: 134.06rpx;
}

.ml-76 {
  margin-left: 137.68rpx;
}

.mt-76 {
  margin-top: 137.68rpx;
}

.ml-78 {
  margin-left: 141.3rpx;
}

.mt-78 {
  margin-top: 141.3rpx;
}

.ml-80 {
  margin-left: 144.93rpx;
}

.mt-80 {
  margin-top: 144.93rpx;
}

.ml-82 {
  margin-left: 148.55rpx;
}

.mt-82 {
  margin-top: 148.55rpx;
}

.ml-84 {
  margin-left: 152.17rpx;
}

.mt-84 {
  margin-top: 152.17rpx;
}

.ml-86 {
  margin-left: 155.8rpx;
}

.mt-86 {
  margin-top: 155.8rpx;
}

.ml-88 {
  margin-left: 159.42rpx;
}

.mt-88 {
  margin-top: 159.42rpx;
}

.ml-90 {
  margin-left: 163.04rpx;
}

.mt-90 {
  margin-top: 163.04rpx;
}

.ml-92 {
  margin-left: 166.67rpx;
}

.mt-92 {
  margin-top: 166.67rpx;
}

.ml-94 {
  margin-left: 170.29rpx;
}

.mt-94 {
  margin-top: 170.29rpx;
}

.ml-96 {
  margin-left: 173.91rpx;
}

.mt-96 {
  margin-top: 173.91rpx;
}

.ml-98 {
  margin-left: 177.54rpx;
}

.mt-98 {
  margin-top: 177.54rpx;
}

.ml-100 {
  margin-left: 181.16rpx;
}

.mt-100 {
  margin-top: 181.16rpx;
}
</style>
